import 'package:flutter/material.dart';

/***
 *
 * 创建人：xuqing
 * 创建时间：2024年7月21日22:16:20
 * 类说明：自定义搜索框
 *
 */

class SearchAppBar extends StatefulWidget {
  SearchAppBar(
      {Key? key,
      required this.hintLabel,
      required this.onSubmitted,
      required this.dateButttonCallback})
      : super(key: key);

  final String hintLabel;
  final Function(String) onSubmitted;
  final Function(void) dateButttonCallback;

  @override
  State<StatefulWidget> createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  // 焦点对象
  final FocusNode _focusNode = FocusNode();

  // 文本的值
  String searchVal = '';

  // 用于清空输入框
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // // 获取焦点
    // WidgetsBinding.instance.addPostFrameCallback((_) {
    //   _focusNode.requestFocus();
    // });
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    MediaQueryData queryData = MediaQuery.of(context);

    return Row(
      children: [
        const Padding(
          padding: EdgeInsets.only(
            right: 8.0,
          ),
        ),
        // TextButton(onPressed:(){
        // widget.dateButttonCallback(null);
        // }, child: Text("日期")),
        //
        GestureDetector(
          child: const Text("日期"),
          onTap: () {
            widget.dateButttonCallback(null);
          },
        ),
        const Padding(
          padding: EdgeInsets.only(
            right: 8.0,
          ),
        ),
        Container(
          // 宽度为屏幕的 0.8
          width: queryData.size.width * 0.8,
          // appbar 默认高度是 56，这里搜索框设置为 40
          height: 40,
          // 设置 padding
          padding: const EdgeInsets.only(left: 20),
          // 设置子级位置
          alignment: Alignment.centerLeft,
          // 设置修饰
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
          ),
          child: TextField(
            controller: _controller,
            // 自动获取焦点
            focusNode: _focusNode,
            autofocus: false,
            decoration: InputDecoration(
              hintText: widget.hintLabel,
              hintStyle: const TextStyle(color: Colors.grey),
              // 取消掉文本框下面的边框
              border: InputBorder.none,
              icon: Padding(
                padding: const EdgeInsets.only(left: 0, top: 0),
                child: Icon(
                  Icons.search,
                  size: 18,
                  color: Theme.of(context).primaryColor,
                ),
              ),
              // 关闭按钮，有值时才显示
              suffixIcon: searchVal.isNotEmpty
                  ? IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () {
                        // 清空内容
                        setState(() {
                          searchVal = '';
                          _controller.clear();
                        });
                      },
                    )
                  : null,
            ),
            onChanged: (value) {
              setState(() {
                searchVal = value;
              });
            },
            onSubmitted: (value) {
              widget.onSubmitted(value);
            },
          ),
        ),
      ],
    );
  }
}
